<template>
    <div class="wrap">
        <div class="table-main">
            <div style="float: right;display: flex;margin-bottom: 30px;margin-right: 8px">
                <el-input placeholder="请输入会员手机号" v-model.trim="selectPhone" maxlength="11"
                          @keyup.enter.native="getMemberByPhone"></el-input>
                <el-button type="primary" size="mini" icon="el-icon-search" @click="getMemberByPhone">查询会员</el-button>
                <el-button type="primary" size="mini" @click="createNewMember" icon="el-icon-edit"
                           style="margin-left: 20px">新增会员
                </el-button>
            </div>
            <el-table
                    style="margin-top: 20px"
                    size="small"
                    ref="filterTable"
                    :data="tableData">
                <el-table-column
                        prop="name"
                        label="会员名称"
                        width="140"
                        column-key="date">
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="办理时间"
                        width="160">
                </el-table-column>
                <el-table-column
                        prop="invalidTime"
                        label="失效时间"
                        width="160">
                </el-table-column>
                <el-table-column
                        prop="phone"
                        label="手机号"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="coach"
                        label="教练"
                        width="130">
                    <template slot-scope="scope">
                        <el-tag
                                :type="hasCoach(scope.row.coach)"
                                disable-transitions>
                            {{scope.row.coach==null?"暂无":scope.row.coach}}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                        label="操作"
                        width="100" header-align="center">
                    <template slot-scope="scope">
                        <div style="display: flex;justify-content: space-around;align-items: center">
                            <el-button class="el-icon-edit" size="mini" @click="goUpdate(scope.row)">
                                修改信息
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="block">
            <el-pagination
                    background
                    @current-change="handleCurrentChange"
                    :current-page.sync="current"
                    :page-size="10"
                    layout="prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
        <NewMember :saveNewMemberShow="saveNewMemberShow" @cancel="saveNewMemberShow=false"></NewMember>
        <MemberUpdate :updateMemberForm="updateMemberForm" :updateShow="updateShow"
                      @cancel="updateShow=false" @updateSuccess="updateSuccess"></MemberUpdate>
    </div>
</template>

<script>
    import {getMemberByPage, getMemberByPhone} from "@/utils/apis/member";
    import NewMember from "@/components/member/NewMember";
    import filter from "@/utils/filter";
    import MemberUpdate from "@/components/member/MemberUpdate";

    export default {
        name: "MemberList",
        components: {
            MemberUpdate,
            NewMember
        },
        data() {
            return {
                current: 1,
                total: 0,
                selectPhone: '',
                tableData: [],
                saveNewMemberShow: false,
                updateShow: false,
                updateMemberForm: {}
            }
        },
        created() {
            this.handleCurrentChange(1)
        },
        computed: {
            hasCoach() {
                return function (val) {
                    if (val === '暂无')
                        return 'info'
                    else
                        return ''
                }
            }
        },
        methods: {
            //更新表格数据
            updateFormData(val) {
                const data = val.data.data
                this.total = data.total
                //过滤教练字段
                data.records.forEach(item => {
                    item.createTime = filter.formatDate(item.createTime, 'yyyy-M-d')
                    item.invalidTime = filter.formatDate(item.invalidTime, 'yyyy-M-d')
                    if (item.coach == null)
                        item.coach = '暂无'
                })
                this.tableData = data.records
            },
            //更换当前页
            async handleCurrentChange(val) {
                this.current = val
                const loading = this.$loading({
                    lock: true,
                    text: '更新数据.......',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                await getMemberByPage(this.current, 10).then(res => {
                    if (res.data.code === 200) {
                        this.updateFormData(res)
                        loading.close()
                    } else {
                        this.$message.error('数据请求失败')
                    }
                })
            },
            //添加新的会员
            createNewMember() {
                this.saveNewMemberShow = true
            },
            //通过手机号获取会员信息
            getMemberByPhone() {
                if (this.selectPhone.length === 11) {
                    this.current = 1
                    getMemberByPhone(this.selectPhone).then(res => {
                        console.log(res.data)
                        if (res.data.code === 200 && res.data.data) {
                            const member = res.data.data[0]
                            member.createTime = filter.formatDate(member.createTime, 'yyyy-M-d')
                            member.invalidTime = filter.formatDate(member.invalidTime, 'yyyy-M-d')
                            this.tableData = []
                            this.tableData.push(member)
                            this.$message.success('查询成功')
                            this.selectPhone = ''
                        } else {
                            this.$notify.info('暂无' + this.selectPhone + '该会员\t' + '请检查是否输入错误')
                        }
                    })
                } else if (this.selectPhone === '') {
                    //重新初始化数据
                    this.handleCurrentChange(1)
                } else {
                    this.$message.warning('请正确填写手机号')
                }
            },
            //打开修改页
            goUpdate(member) {
                this.updateMemberForm = JSON.parse(JSON.stringify(member))
                this.updateShow = true
            },
            //修改成功回调
            updateSuccess() {
                this.updateShow = false
                this.handleCurrentChange(this.current)
            },
        }
    }
</script>

<style scoped>
    .wrap {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .table-main {
        width: 875px;
    }

    .block {
        padding-top: 50px;
        margin-right: 70px;
    }
</style>